<template>
	<div>
		<h2 data-v-034e6e73="" id="svgImage">
			Navbar 导航栏 <img @click="jump('api','smooth')" data-v-abf2c1f6="" style="width: 32px;height: 32px;"
				src="../../static/img/to_api.png"></h2>
		<el-divider></el-divider>
		<!-- 组件源码 -->
		<h3 data-v-e74a3c6e="">组件源码</h3>
		<folding-panel @close="jump('code1')" id="code1">
			<div id="">
				<p class="describe">
					在 <span class="parameter">components</span> 文件夹下创建名字为 <span class="parameter">dev-navbar</span>
					的文件夹，用来存放当前组件。
				</p>
				<p class="describe">
					在 <span class="parameter">dev-navbar</span> 文件夹下创建 <span class="parameter">dev-navbar.vue</span>
					将以下代码复制进去。
				</p>
			</div>
			<dev-highlightjs autodetect :code="interfaceData.basic_examples"></dev-highlightjs>
		</folding-panel>
		<!-- 基本使用 -->
		<h3 data-v-e74a3c6e="">基本使用</h3>
		<div id="">
			<p class="describe">
				根据源码引入完毕后，直接在界面中使用，默认导航名称展示为返回。
			</p>
			<dev-highlightjs autodetect :code="interfaceData.default_use"></dev-highlightjs>
			<p class="describe">
				通过 <span class="parameter">mode</span>定义导航名称位置，默认导航名称在左边，可以传入<span
					class="parameter">center</span>居中、<span class="parameter">right</span>在右边。<br />
				通过 <span class="parameter">title</span>定义导航名称。<br />
				通过 <span class="parameter">is-back</span>定义导航是否显示返回按钮。
			</p>

			<dev-highlightjs autodetect :code="interfaceData.mode_use"></dev-highlightjs>
			<p class="describe">
				当顶部导航不符合需求的时候可以使用具名插槽<span class="parameter">nav</span>，自定义导航内容
			</p>
			<dev-highlightjs autodetect :code="interfaceData.nav_use"></dev-highlightjs>
		</div>

		<h3 id="api" data-v-e74a3c6e="">API</h3>
		<dev-table mode="Props" :data="tableData"></dev-table>
		<dev-table mode="Event" :data="eventData"></dev-table>
	</div>
</template>

<script>
	import exampleData from './example.js'
	export default {
		created() {
			this.interfaceData = exampleData;
		},
		data() {
			return {
				interfaceData: {}, //界面数据
				tableData: [{
						parameter: 'mode', //参数
						explain: '导航名称位置', //说明
						type: 'String', //类型
						defaultValue: 'left', //默认值
						optionalValue: 'center / right', //可选值
					}, {
						parameter: 'title', //参数
						explain: '导航名称', //说明
						type: 'String | Number', //类型
						defaultValue: '返回', //默认值
						optionalValue: '--', //可选值
					}, {
						parameter: 'color', //参数
						explain: '导航栏文字颜色', //说明
						type: 'String', //类型
						defaultValue: '#fff', //默认值
						optionalValue: '--', //可选值
					},
					{
						parameter: 'size',
						explain: '导航栏文字大小',
						type: 'String | Number',
						defaultValue: '36',
						optionalValue: '--',
					},
					{
						parameter: 'is-back',
						explain: '是否显示返回箭头',
						type: 'Boolean',
						defaultValue: 'true',
						optionalValue: 'false',
					},
					{
						parameter: 'icon-color',
						explain: '返回箭头颜色',
						type: 'String',
						defaultValue: '#fff',
						optionalValue: '--',
					},
					{
						parameter: 'bg-color',
						explain: '导航栏背景颜色（默认渐变色）可自定义任何颜色',
						type: 'String',
						defaultValue: 'linear-gradient(270deg, #FA1E39 0%, #FA2A20 100%)',
						optionalValue: '--',
					},
					{
						parameter: 'z-index',
						explain: '导航栏层级',
						type: 'String | Number',
						defaultValue: '999',
						optionalValue: '--',
					}
				],
				eventData: [{
						parameter: 'back',
						explain: '点击返回箭头后触发，默认后退一页',
						callback: '--'
					},
					{
						parameter: 'information',
						explain: '初次加载时会对外抛出，导航栏整体高度（包括手机状态栏）px、导航栏高度（无状态栏高度）px',
						callback: `val:{navAllHeight,navHeight}`
					}
				]

				// {
				// 	parameter: '',
				// 	explain: '',
				// 	type: 'String',
				// 	defaultValue: '',
				// 	optionalValue: '',
				// }

			}
		},
		methods: {
			//优化跳转，缓慢滚动到指定位置
			async goAnchor(selector, method) {
				/*method 为字符串时,scrollIntoViewOptions只赋值behavior的参数,如需修改整,其他参数需传递object对象,
				可传参数如下:
				{
				    behavior: "auto"  | "instant" | "smooth",
				    block:    "start" | "end",
				} */
				let [dataType, scrollIntoViewOptions] = [false, {
					behavior: 'instant'
				}];
				//判断是否传递跳转方法
				if (method) {
					dataType = Object.prototype.toString.call(method) === '[object Object]';
					if (dataType) {
						scrollIntoViewOptions = method;
					} else {
						scrollIntoViewOptions.behavior = method;
					}
				}
				let anchor = await new Promise((resolve, reject) => {
					return resolve(this.$el.querySelector(selector)) // 获取元素
				})
				if (anchor) {
					anchor.scrollIntoView(scrollIntoViewOptions) // js的内置方法，可滚动视图位置至元素位置
				}
			},
			//进行跳转到指定 id 元素
			jump(val, method) { // 点击跳转的方法 val 你定义的需要跳转的标签id 此方法可以根据自己的实际情况编辑
				this.goAnchor('#' + val, method)
			}

		}

	}
</script>

<style>

</style>
